<template>
  <div class="page page-home">
    <div v-if="deskNumber && !show">欢迎入座<em>{{deskNumber}}</em>号桌，您是<em>{{userLabel}}</em></div>
    <van-popup v-model="show" :close-on-click-overlay="false">
      <div v-if="deskNumber && show">当前桌位号为<em>{{deskNumber}}</em>，请选择你的身份</div>
      <ul v-if="roles">
        <li v-for="item in roles" :key="item.role">
          <van-button type="primary" v-if="item.role === 'main'" @click="getInfo(item.role, item.label)">{{item.label}}</van-button>
          <van-button type="default" v-else @click="getInfo(item.role, item.label)">{{item.label}}</van-button>
        </li>
      </ul>
    </van-popup>
    <div v-if="userRole === 'main'">
      该桌位已被您锁定，现在去<a @click="goToMenu('Menus')">点菜吧</a>
    </div>
    <div v-else-if="userRole === 'normal'">
      该桌位已被锁定，您不可以下单，但是可以把菜单推荐给{{deskNumber}}号桌位，现在去<a @click="goToMenu('MenuRecommend')">看菜单</a>
    </div>
    <div v-else>

    </div>
  </div>
</template>

<script>
import getDeskNum from '@/api/demo'

export default {
  name: 'index',
  data () {
    return {
      show: true,
      roles: [
        {label: '组织者', role: 'main'},
        {label: '参与者', role: 'normal'}
      ],
      deskNumber: null,
      userRole: null,
      userLabel: null
    }
  },
  mounted: function () {
    this.getMockNumber()
  },
  beforeCreate: function () {
    document.getElementsByTagName('body')[0].className = 'fullpage'
  },
  beforeDestroy: function () {
    document.body.removeAttribute('class', 'fullpage')
  },
  methods: {
    getMockNumber: function () {
      getDeskNum().then((res) => {
        console.log(res)
        this.deskNumber = res.data.deskNumber
      })
    },
    getInfo: function (role, label) {
      this.userLabel = label
      this.userRole = role
      this.show = false
      this.$store.dispatch('putDeskInfo', this.deskNumber)
    },
    goToMenu: function (name) {
      this.$router.push({
        'name': name,
        params: {deskNumber: this.deskNumber, userRole: this.userRole}
      })
    }
  }
}
</script>

<style scoped lang="less">
  .van-popup{
    width: 70%;
    padding: 1rem 1.5rem 1.5rem;
    border-radius: 5px;

    button {
      width: 100%;
      margin: 1rem 0 0;
    }
  }
  .page-home{
    padding: 2rem;
    background-color: #f2f2f2;
    position: fixed;
    width: 100%;
    height: 100%;
  }
</style>
